﻿
<template>
  <div class="Adventure_core"> 
    <input type="file" class="=file" style="display:none" ref="file"/>
    <div class="Adventure_header">
      <img src="../../static/img/letter_l.jpg" alt="Alternate Text" v-show="letter" class="ad_img_base" v-on:click="ad_img_base"/>
      <img src="../../static/img/letter_l_act.jpg" alt="Alternate Text" v-show="!letter"  class="ad_img_base" v-on:click="ad_img_base" >
      {{ad_header_data}}
    </div>
    <div class="Adventure_get_img"ref="img_wrapper">
      <!-- tips s -->
      <!--<img src="../../static/img/adventure_img.jpg"
           alt="alternate text" class="adventure_get_img_tips"
           v-show="img_tips" v-on:click="get_img"/>-->
      <!-- tips e -->
      <!-- swiper s -->
      <mt-swipe :auto="4000" v-show="swipe_show" class="swipe">
        <mt-swipe-item class="slide1" v-for="(list,index) in img_list">
          <!-- 添加图片按钮 s-->
         <!-- <div class="add_img"    v-on:click.self="get_img"> + </div>-->
          <!-- 添加图片按钮 e-->

          <!-- 删除图片按钮 s -->
          <!--<div class="remove_img" v-on:click.self="img_self_remove"> - </div>-->
          <!-- 删除图片按钮 e -->

          <img v-bind:src="list|judge_and_add_Base" style="width:70.6vw;height:19rem"  v-on:click="show_max(list.img)"/>

          <div class="swiper_w" v-html="w_value">
            <!--{{w_value}}-->
          </div>
          <!--<img src="../../static/img/adventure_img.jpg"
               alt="alternate text" class="adventure_get_img_tips"
               v-if="list.tips" v-on:click="get_img" />-->
        </mt-swipe-item>
      </mt-swipe>
      <!-- swiper e -->
    </div>
    <div class="Adventure_get_music">
      <img src="../../static/img/wen.png" class="wenpng" v-on:click="wenpng_click" v-if="false"/>
      <!--v-on:click="show_music"-->
      <!-- v-on:click="play_music_v" -->
      <div class="Adventure_music_line" v-on:click="play_v_m" v-if="play_state">
        播放语音
      </div>
      <div class="Adventure_music_line" v-on:click="parse_m" v-if="!play_state">
        暂停语言
      </div>
      <!--<div class="Adventure_music_btn"></div>-->
      <img src="../../static/img/music_player_icon.png" class="Adventure_music_btn" />
    </div>
    <div class="Adventure_bottom">
      <div class="Adventure_left">
        <div class="Adventure_bottom_header">
          <div class="Adventure_bottom_header_s">冒险试炼:</div>
          <div class="Adventure_bottom_header_btn" v-on:click="q_q" v-if="false">
            参考问题
          </div>
        </div>
        <textarea class="text_area" ref ="text_area">
            {{q_data}}
        </textarea>
      </div>
      <div class="certain_btn" v-on:click="repeat_wrapper_show_f">
        回复
      </div>
    </div>
    <!-- wenpng_click s -->
    <div class="wenpng_click_mask" v-show="false" v-on:click.self="wenpng_click_mask_h"  placeholder="请输入文字">
       <textarea ref ="wen_c">
         {{w_value}}
       </textarea>
       <div class="certain_w" v-on:click="certain_btn_w">
          确认
       </div>
    </div>
    <!-- wenpng_click e -->
    <!-- new w input s-->
    <div class="new_input_w" v-show="wenpng_click_d">
      <input type="text" name="name" value="" placeholder="标题" class="input_title" ref ="title"/>
      <textarea class="text_a_input" placeholder="输入文字"  ref ="wen_c">
          {{w_value}}
      </textarea>
      <img src="../../static/img/ad_input_succ.jpg" class="input_s_btn" v-on:click="certain_btn_w">
    </div>
    <!-- new w input e -->
    <!--repeat s-->
    <div class="repeat_wrapper" v-show="repeat_wrapper_show">
        <div class="repeat">
          <textarea class="w_input" ref="add_repeat_input" placeholder="添加回复内容">
            
          </textarea>
          <!--<div class="repeat_middle_box">
              <img src="../../static/img/ad_add_img.jpg" class="add_img_ad"/>
              <img src="../../static/img/ad_voice_img.jpg" class="voice_img">
          </div>-->

          <!-- repeat_bottom_wrapper s -->
          <div class="repeat_bottom_wrapper">
                <!--<div class="repeat_btn_cover base_repeat_btn">
                   匿名回复
                </div>-->
                <div class="repeat_btn base_repeat_btn" v-on:click="repeat_fun">
                  回复
                </div>
          </div>
          <!-- repeat_bottom_wrapper e -->

        </div>
    </div>
    <!-- repeat e-->
    <!-- play s -->
    <audio v-bind:src="music_data" class="" ref ="auto_play">
      <p>你的浏览器不支持audio标签</p>
    </audio>
    <!-- play e -->
    <div class="bottom_btn_wrapper">
      <!--<img src="../../static/img/collect.png">
    <img src="../../static/img/share.png">-->
      <img src="../../static/img/pre_page.png" v-on:click="pre_page">
      <img src="../../static/img/next_page.png" v-on:click="next_page">
    </div>
  </div>

  

</template>

<script>
  import '../../static/css/mint-ui/style.css';
  import MintUI from 'mint-ui';
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import { Toast, Indicator, MessageBox, Swipe, SwipeItem  } from 'mint-ui';
  import qs from 'qs';
  import Adventure from "../../static/css/Adventure/Adventure.css";
  import Vue from "vue";
  import axios from 'axios';
  import filter from "../filter/filter.js";
  import common from "../common/common.js";
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
  Vue.prototype.$http = axios;
  Vue.use(MintUI);
  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);

  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        show_music_t: false,
        img_tips: true,
        img_list: [],
        img_src: "www",
        swipe_show:false,
        file_plus_flag: false,
        q_list: [],
        wenpng_click_d: false,
        w_value: "",
        swiper_tips_index: null,
        _has_img: false,
        _has_w: false,
        repeat_wrapper_show: false,
        letter: false,
        play_state: true,
        ad_visit_data: "",
        music_data: "",//音乐data
        ad_header_data: "初次遇见",//title
        now_page_index: 0,//初始化index
        add_card_list:""
      }
    },
    props: ["music_show", "img_max_show", "show_q","q_data"],
    beforeCreate: function () {

    },
    directives: {
      change: {
        // 指令的定义
        inserted: function (el) {

        }
      }
    },
    watch: {
      // 如果 `question` 发生改变，这个函数就会运行
      q_data: function (newQuestion) {
        this.$refs.text_area.value = this.q_data
      }
    },
    methods: {
      //ad_img_base
      ad_img_base: function () {
        this.$store.dispatch("thom_redirect",
          { name: "/ad_list", router: this.$router });
      },
      //repeat_fun
      repeat_fun: function () {
        Indicator.open();
        
        let user_id = common.get_user_id();
        this.$http.post('/yizhiweimen/api/user/personalHomepage/TrialQuestionAnswer',
          qs.stringify(
            {
              'user.id': user_id,
              "adventurecard.id": this.add_card_list[this.now_page_index].id,
              "answer": this.$refs.add_repeat_input.value
            })
          )
          .catch((thrown) => {
            Indicator.close();
             
          }).then((e) => {
            Indicator.close();
            this.repeat_wrapper_show = false
            Toast({
              message: e.data,
              position: 'bottom',
              duration: 5000
            })
          })
      },
      //pre_page
      pre_page: function () {
        if (this.now_page_index <= 0) return
        this.now_page_index = parseInt(this.now_page_index) - 1;
        this.add_card_list = JSON.parse(sessionStorage.getItem("add_card_list"))//所有卡片id
  

        console.log("_____id")
        console.log(this.add_card_list)
        console.log(this.now_page_index)
        let id = this.add_card_list[this.now_page_index].id
        sessionStorage.setItem("nav_id",id);
        this.init_get_mess()
      },
      //next_page
      next_page: function () {
        this.add_card_list = JSON.parse(sessionStorage.getItem("add_card_list"))//所有卡片id
        if (this.now_page_index >= this.add_card_list.length) return
        this.now_page_index = parseInt(this.now_page_index) + 1;

   
        console.log("id+++++++=")
        console.log(this.add_card_list)
        console.log(this.now_page_index)
        let id = this.add_card_list[this.now_page_index].id
        sessionStorage.setItem("nav_id",id);
        this.init_get_mess()
      },
      //初始化数据 哈哈哈
      init_get_mess: function () {
        this.add_card_list = JSON.parse(sessionStorage.getItem("add_card_list"))//所有卡片id
        ///api/user/personalHomepage/getAdventurecardById
        let nav_id = sessionStorage.getItem("nav_id");
        
        Indicator.open();
        this.$http.get('/yizhiweimen/api/user/personalHomepage/getAdventurecardById?id=' + nav_id,
          qs.stringify(
            {
              'id': nav_id,
            })
         )
         .catch((thrown) => {
            Indicator.close();
            console.log(thrown)
         }).then((e) => {
           Indicator.close();
           //console.log(e)
           let img = e.data.image.split(",");//用， 隔开 切分 image 的图片
           if (img.length >= 1) {
             this.swipe_show = true;
             this.img_list = img;
           }

           //设置 music data
           this.music_data = e.data.voice

           //问题内容
           this.q_data = e.data.content;

           //title
           this.ad_header_data = e.data.title;
         })
      },
      play_v_m: function () {
        this.play_state = false;
        console.log("pla_Music");
        this.$refs.auto_play.play();
      },
      parse_m: function () {
        this.play_state = true;

        this.$refs.auto_play.pause();
      },
      repeat_wrapper_show_f: function () {
        this.repeat_wrapper_show = !this.repeat_wrapper_show;
      },
      up_Load: function () {
        var formData = new FormData();
      },
      img_self_remove: function (index) {
        let len = this.img_list.length;
        this.img_list.splice(index, 1);
        this.$refs.file.value = null//初始化 input 的 value 值
        if (this.img_list.length == 0) {//没有图 和 文字
          this.swipe_show = false
          this.img_tips = true;
        } else if (this.img_list.length == 1 && (!!this.img_list[0] ? true : false)) {//有一个 但是 是文字
          this.img_list.push({ tips: true, w: false });//swiper 添加 tips
          this.swiper_tips_index = 1
        }
      },
      wenpng_click_mask_h: function () {
        this.wenpng_click_d = false
      },
      wenpng_click: function () {
        this.wenpng_click_d = true;
      },
      q_q: function () {
        //显示问题参考
        this.$emit("show_q");
      },
      get_img: function () {
        this.$refs.file.click();
      },
      show_music: function () {
        this.$emit("music_show")
      },
      show_max: function (img) {
        //图片全屏
        //this.$emit("img_max_show", img);
        //this.$refs.show_max_img.src = img
        this.$store.commit("set_ad_img_list", this.img_list);
        this.$store.dispatch("thom_redirect",
          { name: "/scroll_full", router: this.$router });
      },
      //文字确认按钮
      certain_btn_w: function () {
        let x = 0
        let title = this.$refs.title.value;
        this.wenpng_click_d = false;
        this.w_value = '<div style="margin-top:3vw"></div>' + title + '</br>' +"<div style='margin-bottom:3vw'></div>" +this.$refs.wen_c.value ;
        if(!this._has_w){
          this._has_w = true;
          this.img_list.push({ w: true, tips: false,w_value: w_value})
        };//swiper 添加 文字
        if (!this._has_img) {
          this._has_img = true;
          this.img_list.push({ tips: true, w: false });
        }//swiper 添加 tips

        let Len = this.img_list.length;

        for (; x < Len; x++) {
          if (this.img_list[x].tips == true) {
            this.swiper_tips_index  = x
          }
        }
        this.swipe_show = true;
        this.img_tips = false
      }
    },
    components: {

    },
    mounted: function () {
      this.now_page_index = sessionStorage.getItem("now_page_index");

      this.$nextTick(() => {

        //获取初始化信息
        this.init_get_mess();

        //图片添加
        let _this = this; // 下面的 this 是 input 指向input的
        this.$refs.file.addEventListener("change", (e)=> {
          //promise s
          let count = 0;
          let result = e.srcElement.files;
          let promise = new Promise((resolve, reject) => {
            let Len = e.srcElement.files.length,
                tips_index = _this.swiper_tips_index

            for (let x = 0; x < Len; x++) {
                 let  reader = new FileReader();
                  reader.readAsDataURL(result[x]);
                  let _e = e;

                  //swiper_tips remove
                  if (_this.swiper_tips_index != null) {
                    _this.img_list.splice(tips_index, 1)
                    _this.swiper_tips_index = null;
                  }

                 reader.onload = (e) => {
                   this._has_img = true;
                    this.img_list.push({ img: e.target.result, plus: false ,w:false,tips:false});
                      resolve("11");
                    }
                 }
          });

          promise.then((value) => {
            this.img_tips = false;
            // success
            _this.swipe_show = true;
          },(value)=>{
            // failure
          });
        })
      })
    },
    components: {

    }
  }
</script>
<style>
  .bottom_btn_wrapper{
    position:absolute;
    bottom:-20vw;
    z-index:100;
    justify-content:space-between;
    display:flex;
    width:100%;
  }
  .bottom_btn_wrapper img{
    width:20vw;
    height:12vw;
  } 
  .Adventure_music_line {
    margin-left: 5.3vw;
  }
  /*audio_hidden s*/
  .audio_hidden {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    visibility: hidden;
  }
  /*audio_hidden e*/
  /*ad_img_base s*/
  .Adventure_header {
    position: relative;
  } 
  .ad_img_base {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12vw;
    width: 6.9vw;
  }
  /*ad_img_base e*/
  /*repeat_wrapper s*/
  .repeat_middle_box {
    display: flex;
    justify-content: space-around;
  } 
  .voice_img {
    width: 14vw;
    height:12vw;
  } 
  .add_img_ad {
    width: 14vw;
    height:12vw;
  } 
  .w_input {
    height: 21.7vw;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    resize: none;
    border-bottom: 1px solid #a36439;
  } 
  .repeat_bottom_wrapper {
    display: flex;
    position: absolute;
    bottom: 4.6vw;
    right: 6vw;
  } 
  .base_repeat_btn {
    padding: 1vw 1.3vw;
    border:1px solid #a36439;
    letter-spacing:1px;
    margin-left:2vw;
    color:#a36439;
  } 
  .repeat {
    width: 76vw;
    height: 37vw;
    border: 1px solid #a36439;
    margin: 3.7vw auto 0;
  } 
  .repeat_wrapper {
    width: 88vw;
    height: 63vw;
    border: 1px solid #a76940;
    background-color: #fff;
    position: absolute;
    top: -10vw;
    left: 50%;
    transform: translateX(-50%);
  }
  /*repeat_wrapper e*/
  .swiper_w {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1rem;
    color: #000;
    overflow-y: scroll;
  }
  /*remove_img s*/
  .remove_img {
    position: absolute;
    left: 4vw;
    top: 2rem;
    width:8vw;
    height:8vw;
    line-height:7vw;
    font-size: 7vw;
    color: #fff;
    background-color: #ff2d4b;
    border-radius:50%;
    box-shadow:0 0 8px 2px #808080;
  }
  /*remove_img e*/
  /*add img */
  .add_img {
    position: absolute;
    right: 4vw;
    top: 2rem;
    width: 8vw;
    height: 8vw;
    line-height: 7.5vw;
    font-size: 7vw;
    color: #fff;
    background-color: forestgreen;
    border-radius: 50%;
    box-shadow: 0 0 8px 2px #808080;
  }
/*add img */
  /*certain_w s*/
  .certain_w{
    position:absolute;
    bottom:10%;
    border-radius:2vw;
    padding:3vw 6vw 3vw 6vw;
    left:50%;
    transform:translate(-50%);
    letter-spacing:1vw;
    color:#fff;
    background-color:#ff2d4b;
  }
  /*certain_w e*/
  /*wenpng_click_mask s*/
  /*resize: none;*/
  .wenpng_click_mask {
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3vw;
  }
  .wenpng_click_mask textarea {
    resize: none;
    width:80%;
    height:60%;
    border-radius:3vw;
    outline:none;
    padding-left:4%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-size:1.2rem;
    color:#000;
    
    
  }
  /*wenpng_click_mask e*/
  /*show_max s*/
  .show_max {
    width: 100%;
    height: 100%;
    background-color: #000;
    left: 0;
    top: 0;
    position: absolute;
  }
  /*show_max e*/
  .adventure_get_img_tips {
    width: 100%;
    height: 100%;
  } 
  .mint-swipe-indicator.is-active {
    background: #803c0e;
  }
</style>
<style scoped>
  .mint-swipe .mint-swipe-indicators .is-active {
    background: #a36439;
  }
  .mint-swipe-indicator.is-active {
    background: #a36439;
  }
  .mint-swipe-indicator.is-active {

  }
  .mint-swipe-indicator .is-active {
    background: #a36439;
  } 
  @component-namespace page {
    @component swipe {
      @descendent desc {
        text-align: center;
        color: #666;
        margin-bottom: 5px;
      }

      .mint-swipe {
        height: 200px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
      }

      .mint-swipe-item {
        line-height: 200px;
      }

      .slide1 {
        background-color: #0089dc;
        color: #fff;
      }

      .slide2 {
        background-color: #ffd705;
        color: #000;
      }

      .slide3 {
        background-color: #ff2d4b;
        color: #fff;
      }
    }
  }
 
</style>
